import React, { Component } from 'react'
import { Layout, Menu, Select, Dropdown, Icon, Button, Tabs, Modal, Alert, Form, Input, Tooltip, message, Upload, Table, Popconfirm, Divider, Row, Col, Tag, Checkbox } from 'antd'
import { deleteAttendanceUserApi, getAttendanceConnectionListApi, getAttendanceUserAndIsBindApi, allEduDepartmentApi} from '../js/api.js';
import icon from "../img/icon.png";
const successinfo = () => {


    message.info('删除成功', 0.2);
};
const failinfo = () => {


    message.info('删除失败，请重试', 0.2);
};
class AttendanceUserBind extends Component {
    constructor(props){
        super(props)
        this.state={
            tableLoading: false,
            userCloumnData:[],
            filteredInfo: null,
            sortedInfo: null,
            bindFilter: [{
                text: '已绑定',
                value: 1
            }, {
                text: '未绑定',
                value: 0
            }],
          

        }
        this.refershdata=this.refershdata.bind(this)
    }


    componentDidMount(){
        this.refershdata()
    }
    refershdata(){
        const departmentId=parseInt(sessionStorage.getItem('departmentId'))
        console.log('执行我了');
        this.setState({
            tableLoading:true
        })
        getAttendanceUserAndIsBindApi(departmentId)
        .then((res) => {

            let userCloumnData = [];
           

            res.data.map((item, index) => {

                userCloumnData.push({
                    name: item.name,
                    usernumber:item.usernumber,
                    id:item.id,
                    key:index+1,
                    cardtype: item.carType,
                    employer:item.employer||'无',
                    logoCode:item.logoCode,
                    bind:item.bind,

                })
             
            })

            this.setState({
                userCloumnData:userCloumnData,
                tableLoading:false
                
            });

        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });


    }
    handleDeleteUser(record){
        console.log(record);

        
       
        deleteAttendanceUserApi(parseInt(record))
        .then((res) => {

           
console.log(res.data);

if(res.data=='success'){
    successinfo(); this.refershdata()

}else{
 failinfo()   
}



       

        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }
     onChange(pagination, filters, sorter, extra) {
        console.log('params', pagination, filters, sorter, extra);
        // this.setState({
        //     userCloumnData:extra.currentDataSource

        // })
      }
    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
    //表格表头
        const UserColumns = [
            {
                title: '序号',
                dataIndex: 'key',
                key: 'key',
                width: '8%',
            }, {
            title: '用户姓名',
            dataIndex: 'name',
            key: 'name',
            width: '12%',
        },
        {
            title: "用户编号",
            dataIndex: 'usernumber',
            key: "usernumber",
            width: '15%',
            sorter: {
                compare: (a, b) => a.usernumber - b.usernumber,
                multiple: 1,
              },
            
        }, {
            title: "所属部门",
            dataIndex: 'employer',
            key: "employer",
            width: '20%',
            
        }, {
            title: '卡类型',
            dataIndex: 'cardtype',
            key: 'cardtype',
            width: '15%',
            
        },
        {
            title: '绑定情况',
            dataIndex: 'bind',
            key: 'bind',
            width: '15%',
            sorter: {
                compare: (a, b) => a.bind - b.bind,
                multiple: 2,
              },
              filters: this.state.bindFilter,
     
                onFilter: (value, record) => record.bind===value,
                filterIcon: filtered => <Icon type="filter" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                render: (text, record) => (
                    <div>
                        {record.bind == 0 ?
                            (<Tag color={'#108ee9'}>未绑定</Tag>) : (<Tag color={'#87d068'}>已绑定</Tag>)}
                    </div>
                )
            // render: (text, record, index) => {
            //     const tags = record.bind==1? <Tag color='green'>已绑定</Tag>:<Tag color='blue'>未绑定</Tag>
            //     return (
            //         <div>
            //             {tags}
            //         </div>
            //     );
            // }
            
        },  
  
        {
            title: "操作详情",
            key: "action",
            width: '15%',
            render: (text, record) => (
                <span>
                    <a
                        href="#"
                        onClick={() => {
                            this.showModal("updateMenu", {
                                id: record.id,
                                name: record.name,
                                key: record.key,
                                logocode: record.logoCode
                            })
                        }}>
                        修改
                    </a>
       
                    <Divider type="vertical" />
                    <Popconfirm
                        title={
                            
                                "确定删除？"
                        } okText="确定" cancelText="取消"
                        onConfirm={() => this.handleDeleteUser(record.id)}>
                        <a href="#">删除</a>
                    </Popconfirm>
                </span>
            )
        }];
        
        return (
            <div>
                   
                <Table
                    dataSource={this.state.userCloumnData}
                    columns={UserColumns}
                    onChange={this.onChange.bind(this)}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    expandedRowRender={record => {
                        return (
                            <UserInnerTable
                                userId={record.id}
                             

                            />
                        )
                    }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                   />
            </div>
        )
    }
}


class UserInnerTable extends Component{


    constructor(props){
        super(props)
        this.state={
            userId:props.userId,
         
            tableLoading:true,
            userConnectionCloumnData:[]

        }
    }


    componentDidMount(){

        //console.log('ssss', this.props);

        const departmentId=parseInt(sessionStorage.getItem('departmentId'))
     
        this.setState({
            tableLoading:true
        })
        getAttendanceConnectionListApi(this.state.userId)
        .then((res) => {

            let userConnectionCloumnData = [];
           

            res.data.map((item, index) => {

                userConnectionCloumnData.push({
                    name: item.name,
                    key:index+1,
                    connection: item.connection,
                    phoneNumber:item.phoneNumber,
                    photo:item.imageUrl

                })
             
            })

            this.setState({
                userConnectionCloumnData:userConnectionCloumnData,
                tableLoading:false
                
            });

        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });

    }



    render(){
        const UserConnectionColumns = [
         {
            title: '绑定人姓名',
            dataIndex: 'name',
            key: 'name',
            width: '12%',
        },
        {
            title: "与用户关系",
            dataIndex: 'connection',
            key: "connection",
            width: '15%',
            
        }, {
            title: "绑定人电话",
            dataIndex: 'phoneNumber',
            key: "phoneNumber",
            width: '20%',
            
        }
  
        // {
        //     title: "操作详情",
        //     key: "action",
        //     width: '15%',
        //     render: (text, record) => (
        //         <span>
        //             <a
        //                 href="#"
        //                 onClick={() => {
        //                     this.showModal("updateMenu", {
                             
        //                         name: record.name,
        //                         key: record.key,
                         
        //                     })
        //                 }}>
        //                 修改
        //             </a>
       
        //             <Divider type="vertical" />
        //             <Popconfirm
        //                 title={
                            
        //                         "确定删除？"
        //                 } okText="确定" cancelText="取消"
        //                 onConfirm={() => this.handleDeleteUser(record.id)}>
        //                 <a href="#">删除</a>
        //             </Popconfirm>
        //         </span>
        //     )
        // }
    ];


        return(


            <div>


<Table
                    dataSource={this.state.userConnectionCloumnData}
                    columns={UserConnectionColumns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    bordered={true}
                    pagination={false}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                   />
            </div>
        )
    }

}
export{AttendanceUserBind}

